<template>
    <div>
        <el-dialog v-model="templateVisible" :show-close="false" modal-class="component-dialog" width="900px"
            @close="closeDialog" class="p-0">
            <div>
                <div class="page-container">
                    <!-- 顶部导航栏 -->
                    <div class="top-bar">
                        <div class="left-top-bar">
                            <div class="close-button" @click="closeDialog">×</div>
                            <div class="tab-buttons">
                                <button class="tab" :class="{ active: currentTab === 'all' }"
                                    @click="setTab('all')">全部</button>
                                <button class="tab" :class="{ active: currentTab === 'latest' }"
                                    @click="setTab('latest')">最新</button>
                                <button class="tab" :class="{ active: currentTab === 'tools' }"
                                    @click="setTab('tools')">效率工具</button>
                            </div>
                            <div class="view-toggle">
                                <div class="mode-switch inline-flex rounded-[8px] p-[4px]  flex">
                                    <div class="cursor-pointer rounded-[4px]  bg-color-m1 text-color-t1  h-[20px] w-[20px]"
                                        :class="[isListView === 'grid-view'?'active':'']"
                                        @click="setShowStyle('grid-view')">
                                        <i class="iconfont icon-group text-[20px]"></i>
                                    </div>
                                    <div class="ml-[8px] cursor-pointer rounded-[4px]  text-color-t3 h-[20px] w-[20px]"
                                        :class="[isListView === 'list-view' ? 'active' : '']"
                                        @click="setShowStyle('list-view')">
                                        <i class="iconfont icon-bullet_list text-[20px]"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="search-bar">
                                <div> <i
                                        class="iconfont text-[20px] duration-150 icon-magnifier_icon text-color-t2"></i>
                                </div>
                                <input type="text" placeholder="搜索" v-model="searchQuery">
                            </div>
                        </div>
                        <div class="add-button">
                            <span>添加到：</span>
                            <el-select v-model="addToType" placeholder="Select" style="width: 120px">
                                <el-option v-for="item in addTypeList" :key="item.id" :label="item.name"
                                    :value="item.id" />
                            </el-select>
                        </div>
                    </div>
                    <!-- 页面主体 -->
                    <div v-if="isListView ==='grid-view'" class="grid-view">
                        <div class="widget" v-if="currentTab === 'all' || currentTab === 'latest'"
                            v-for="(item,index) in componentInfo" :key="index">

                            <div class="swiper-slide">
                                <el-carousel :autoplay="false" :arrow="item.styleList?.length>1?'hover':'never'"
                                    :indicator-position="item.styleList?.length>1?'':'none'">
                                    <el-carousel-item v-for="(ele,indx) in item.styleList" :key="indx"
                                        :class="ele.size.type">
                                        <div class="etab-app-item">
                                            <div class="etab-app-item-content">
                                                <img :src="imageUrl(ele.imgUrl)" alt="">
                                                <div class="add-bt flex-cc"
                                                    @click="addHomepage(item,ele)">+</div>
                                            </div>
                                        </div>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div class="etab-app-box_name">
                                <p class="msg-icon_title">{{ item.name }}</p>
                                <div class="msg-icon_msg">{{ item.detail }}</div>
                            </div>
                        </div>
                    </div>
                    <div v-if="isListView === 'list-view'" class="list-view apps-type-Apply">
                        <div class="widget flex" v-if="currentTab === 'all' || currentTab === 'latest'"
                            v-for="(item, index) in componentInfo" :key="index">
                            <div class="list-view-items" v-for="(ele,indx) in item.styleList" :key="indx">
                                <div class="list-view-item" v-if="indx===0">
                                    <img :src="imageUrl(ele.imgUrl)" alt="">
                                    <div class="buttons-list">
                                        <p v-for="size in item.sizeList" :key="size" @mouseenter="isAddHover=index+size.type"
                                            @mouseleave="isAddHover=''" @click="addHomepage(item,size)">
                                            {{isAddHover==index+size.type?'+':sizeMenu(size.type)}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="list-view-item-box_name">
                                <p class="msg-icon_title">{{ item.name }}</p>
                                <div class="msg-icon_msg">{{ item.detail }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { computed,toRefs,reactive,ref } from 'vue'
import { ElDialog,ElCarousel,ElCarouselItem,ElSelect,ElOption } from "element-plus";
import widgetApi from '@/api/widget.ts';
import widgetData from './widget.json'; 
import {
    useContextMenuStore,
} from '../../store';
const contextMenuStore = useContextMenuStore();
let $myemit = defineEmits(['update:templateVisible','addHomepage'])
const currentTab = ref('all' as string);
const isListView = ref("grid-view" as string);
const searchQuery = ref('' as string);
const isAddHover=ref(null)

const imageUrl = (imageName)=> {
    return `./src/assets/image/${imageName}`; // 使用require拼接图片路径
}
const addTypeList = contextMenuStore.menuList
// 已经添加到主页的组件
const isAddList=ref([] as number[])

//切换分类
const setTab = (tab) => {
    currentTab.value = tab;
};

//切换展示形式
const setShowStyle = (showStyle) => {
    isListView.value = showStyle;
};
const props=defineProps({
    templateVisible:{
        type:Boolean,
        default:false
    },
    currentPage:{
        type:Number,
        default:0
    }
})
const addToType = ref(addTypeList?.[props.currentPage]?.id)
const closeDialog = () => {
    $myemit('update:templateVisible', false)
};

const { templateVisible } = toRefs(props)
const componentInfo =ref([])
const sizeMenu = (size) => {
    let sizeName=''
    switch (size) {
        case 'big':
            sizeName='大'
            break
        case 'middle':
             sizeName='中'
            break
        case 'small':
             sizeName='小'
            break
        default:
            break
    }
    return sizeName
}
// 添加到主页
const addHomepage = (item,size) => {
    // isAddList.value.push(item.componertId)
    const addData = { ...item }
    addData.id = Date.now() + Math.floor(Math.random() * 100000)
    addData.size=size
    $myemit('addHomepage', { parentId: addToType.value,item:addData})
}
const getData = () => {
    widgetApi
        .getPage({
            current: 1,
            size: 300,
            // type: activeName.value,
        })
        .then((res) => {
            // console.log(res.records, currentTab.value,'=1=2--3==4-5-5=5=-6=6')
            componentInfo.value=res.records?.map(item=>{
                console.log(item.name, widgetData.componentInfo)
                return {
                    ...item,
                    styleList: widgetData.componentInfo.componertId==item.id?
                    widgetData.componentInfo.styleList:[],
                    sizeList: widgetData.componentInfo.styleList?.map(ele=>{
                        return ele
                    }),
                    widgetType: widgetData.componentInfo.widgetType
                }
            })
            componentInfo.value.push({
                "id": "1000",
                "name": "测试组件",
                "type": "component",
                "detail": "小组件介绍测试",
                styleList: widgetData.componentTest.styleList || [],
                sizeList: widgetData.componentTest.styleList?.map(ele => {
                    return ele
                }),
                widgetType: widgetData.componentTest.widgetType
            })
        });
};
getData()
</script>

<style scoped lang="scss">
/* 页面整体布局 */
:deep(.component-dialog){
    background: transparent;
    .el-dialog{
        padding: 0;
        background: transparent !important;
    }
}
/* 设置滚动条宽度 */
::-webkit-scrollbar {
    width: 8px;
    /* 垂直滚动条宽度 */
    height: 8px;
    /* 水平滚动条高度 */
}

/* 滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
    background-color: rgba(196,187,174, 1);
    /* 滑块颜色 */
    border: 2px solid transparent;
    background-clip: content-box;
}

/* 滚动条轨道的样式 */
::-webkit-scrollbar-track {
    background-color: #ffffffb3;
    /* 轨道背景色 */
    border-radius: 10px;
    /* 轨道圆角 */
}

/* 滚动条轨道边角样式（仅在有双向滚动条时生效） */
::-webkit-scrollbar-corner {
    background-color: rgba(0, 0, 0, 0.2);
    /* 边角背景色 */
}
.page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 640px;
    
    background-color: #ffffffb3;
    backdrop-filter: blur(40px);
    border-radius: 10px;
}

/* 顶部导航栏样式 */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    .left-top-bar{
        display: flex;
    }
    :deep(.add-button){
        .el-select__wrapper{
            border-radius: 8px;
            padding: 5px 10px;
            height: 32px;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
            background: rgba(0, 0, 0, 0.0588235294);
        }
    }
    .tab-buttons {
        display: flex;
        gap: 15px;
        margin-right: 20px;
        .tab {
            background: none;
            border: none;
            font-size: 14px;
            color: dark;
            cursor: pointer;
            padding: 2px 10px;
            border-bottom: 2px solid transparent;
            transition: border-color 0.3s ease, color 0.3s ease;
        }
        .tab.active {
            background: #fff;
            border-radius: 5px;
        }
    }
    .view-toggle{
        margin-right: 10px;
        .mode-switch{
            background-color: #0000000f;
            .active{
                background-color: #fff;
                border-radius: 2px;
                color:#1c1c1e
            }
            >div{
                text-align: center;
                line-height: 20px;
            }
        }
    }
}

.close-button {
    font-size: 16px;
    height: 16px;
    width: 16px;
    background-color: #FF7330;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    transition: color 0.3s ease;
    text-align: center;
    line-height: 14px;
    margin-right: 20px;
    margin-top:8px;
}

.close-button:hover {
    color: #000;
}

/* 搜索组件样式 */
.search-bar {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 5px 10px;
    width: 148px;
    height: 32px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    background: #0000000f;
    i{
        font-size:18px;
    }
}


.search-bar input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    padding: 5px;
    font-size: 1rem;
}

.search-icon {
    color: #666;
    margin-right: 5px;
}

/* 页面网格布局 */
.grid-view {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    height: 500px;
    min-height: 500px;
    overflow-y: auto;
    height: calc(100% - 64px);
}

.list-view {
    display: grid;
    row-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    margin:20px 50px 0 50px;
    padding-bottom: 20px;
    overflow-y: auto;
    height: calc(100% - 64px);
    .widget{
        position: relative;
        .list-view-items{
            
            .list-view-item{
                display: flex;
               
                img{
                    width: 50px;
                    height: 50px;
                    border-radius: 8px;
                }
                
            }
            .buttons-list{
                position: absolute;
                display: flex;
                right: 5px;
                top:5px;
                p{
                    font-size:12px;
                    width: 22px;
                    height: 22px;
                    border-radius: 50%;
                    background: rgb(217,217,217);
                    text-align: center;
                    line-height: 22px;
                    margin-left:8px;
                    cursor: pointer;
                }
                p:hover{
                    color: #5362ff;
                    background-color: #fff;
                }
            }
        }
        .list-view-item-box_name {
            margin-left: 10px;

            .msg-icon_title {
                font-size: 14px;
                color: #181818;
            }

            .msg-icon_msg {
                font-size: 12px;
                color: #797979;
            }
        }
    }
}
.apps-type-Apply{
    grid-template-columns: repeat(2, 1fr);
}

/* 单个模块的样式 */
.widget {
    background: #eae8e6;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
    color: #666;
    .swiper-slide{
        position: relative;
    }
    :deep(.el-carousel__container){
        height: 100%;
    }
    :deep(.el-carousel){
        width:100%;
        height:180px;
        .el-carousel__item{
            .etab-app-item{
                height: 100%;
                display: flex;
                justify-content: center;
                .etab-app-item-content{
                    margin:auto;
                    display: flex;
                    justify-content: center;
                    position: relative;
                    padding: 7px;
                    // height: 100%;
                    img{
                        align-self: center;
                        border-radius: 5px;
                        box-shadow: 0 2px 3px 0 rgb(0 0 0 / 30%), 0 2px 3px 0 rgb(0 0 0 / 30%);
                    }
                    .add-bt{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 24px;
                        height: 24px;
                        font-size: 16px;
                        font-weight: 500;
                        color: #5362ff;
                        cursor: pointer;
                        background-color: #fff;
                        border-radius: 50%;
                        box-shadow: 0 4px 16px #00000026;
                        transition-timing-function: cubic-bezier(.4,0,.2,1);
                        transition-duration: .3s;
                        transition-property: transform;
                        transform: scale(1);
                        text-align: center;
                        line-height: 24px;
                    }
                }
                
            }
        }
        .el-carousel__arrow{
            background-color: transparent;
            color:#666;
            .el-icon{
                font-size:16px;
                font-weight: 900;
            }  
        }
        .el-carousel__arrow--left{
            left:0;
        }
        .el-carousel__arrow--right{
            right:0;
        }
        .el-carousel__indicators{
            .el-carousel__button{
                width: 6px;
                height: 6px;
                border-radius: 3px;
            }
            .is-active{
                .el-carousel__button{
                    width: 7px;
                    height: 7px;
                    border-radius: 3.5px;
                    background:#000
                }
            }
        }
    }
    .big{
        img{
            width: 360px;
            height: 180px;
        }
    }
    .middle{
        img{
            width: 170px;
            height: 170px;
        }
    }
    .small{
        img{
            width: 180px;
            height: 60px;
        }
    }
    .etab-app-box_name{
        margin-top:10px;
        .msg-icon_title{
            font-size: 16px;
            color: #181818;
        }
        .msg-icon_msg{
            font-size: 14px;
            color: #797979;
        }
    }
}

/* 模块占位符样式 */
.placeholder {
    color: #aaa;
}
</style>